<template>
  <div>
    <el-card shadow="hover">
      <el-form :inline="true" :model="form" ref="form" label-width="102px">
        <el-form-item label="${businessName!}名称" prop="${(businessCode?uncap_first)!''}Name">
          <el-autocomplete
            popper-class="my-autocomplete"
            v-model="form.${(businessCode?uncap_first)!''}Name"
            :fetch-suggestions="${(businessCode?uncap_first)!''}FetchSuggestions"
            placeholder="请输入${businessName!}名称"
            @select="item => (form.${(businessCode?uncap_first)!''}Code = item.code)"
            clearable
          >
            <template slot-scope="{ item }">
              <div class="name">${businessName!}编号：{{ item.code }}</div>
              <span class="code">${businessName!}名称：{{ item.value }}</span>
            </template>
          </el-autocomplete>
        </el-form-item>
        <el-form-item label="${businessName!}编号" prop="${(businessCode?uncap_first)!''}Code">
          <el-input
            v-model="form.${(businessCode?uncap_first)!''}Code"
            placeholder="请输入${businessName!}编号"
            clearable
          ></el-input>
        </el-form-item>
        <el-form-item label="创建日期" prop="createdDates" v-if="commonMap.formShowFullVisible">
          <el-date-picker
            v-model="form.createdDates"
            type="daterange"
            align="right"
            unlink-panels
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            :picker-options="formCreatedDateOptions"
          >
          </el-date-picker>
        </el-form-item>
        <el-form-item>
          <el-button
            v-loading="commonMap.formSubmitLoading"
            type="primary"
            icon="el-icon-search"
            @click="formSubmitClick(1)"
          >
            搜索
          </el-button>
          <el-button icon="el-icon-refresh" @click="formResetSubmitClick">重置</el-button>
          <el-switch v-model="commonMap.formShowFullVisible" active-text="高级搜索"></el-switch>
          <el-switch v-model="form.fuzzySearch" active-text="模糊搜索"></el-switch>
        </el-form-item>
      </el-form>
    </el-card>
    <el-card shadow="hover">
      <el-button
        type="primary"
        icon="el-icon-news"
        size="small"
        @click="$refs.indexAdd.dialogVisible = true"
        v-if="permissionAdd"
        >新增
      </el-button>
      <el-badge
        :value="this.pageSelection.length"
        :hidden="this.pageSelection.length < 1"
        class="item"
        v-if="permissionDelete"
      >
        <el-button
          v-loading="commonMap.deletesSubmitLoading"
          type="danger"
          icon="el-icon-delete"
          size="small"
          @click="deletesSubmitClick"
          >批量删除
        </el-button>
      </el-badge>
      <a
        target="_blank"
        :href="'${api_root_url!}/v1/${moduleMapperCode}/${(businessCode?uncap_first)!''}/export/excel?' + formQueryString"
        v-if="permissionExport"
      >
        <el-button type="warning" icon="el-icon-document" size="small"
          >导出excel</el-button
        >
      </a>
      <a
        target="_blank"
        href="/download_import_template/${(businessCode?uncap_first)!''}.xls?action=download"
        v-if="permissionImport"
      >
        <el-button type="info" icon="el-icon-download" size="small"
          >下载excel模板</el-button
        >
      </a>
      <el-upload
        ref="import"
        style="display: inline"
        :with-credentials="true"
        accept=".xls"
        :before-upload="importBeforeUpload"
        :on-success="importSuccess"
        :on-error="importError"
        action="${api_root_url!}/v1/${moduleMapperCode}/${(businessCode?uncap_first)!''}/import/excel"
        v-if="permissionImport"
      >
        <el-button
          v-loading="commonMap.importSubmit"
          type="success"
          icon="el-icon-upload2"
          size="small"
        >
          导入excel
        </el-button>
      </el-upload>
    </el-card>
    <index-add ref="indexAdd" @formSubmitClick="formSubmitClick" />
    <index-modify ref="indexModify" @formSubmitClick="formSubmitClick" />
    <index-view ref="indexView" />
    <el-table
      ref="pageTable"
      v-loading="commonMap.formSubmitLoading"
      element-loading-text="拼命加载中"
      element-loading-spinner="el-icon-loading"
      element-loading-background="rgba(0, 0, 0, 0.8)"
      :data="page.content"
      border
      @selection-change="pageSelectionChange"
      style="width: 100%"
      :height="pageTableHeight"
    >
      <el-table-column type="selection" width="55"> </el-table-column>
      <el-table-column prop="${(businessCode?uncap_first)!''}Code" label="编号" min-width="112">
      </el-table-column>
      <el-table-column prop="name" label="名称" min-width="112"> </el-table-column>
      <el-table-column prop="createdByName" label="创建人姓名" min-width="112">
      </el-table-column>
      <el-table-column prop="createdDate" label="创建时间" min-width="224">
      </el-table-column>
      <el-table-column fixed="right" label="操作" width="136">
        <template slot-scope="scope">
          <el-button type="text" size="small" @click="viewSubmitClick(scope.row)"
            >查看</el-button
          >
          <el-button
            type="text"
            size="small"
            @click="modifySubmitClick(scope.row)"
            v-if="permissionEdit"
          >
            编辑
          </el-button>
          <el-button
            v-loading="commonMap.deleteSubmitLoading"
            type="text"
            size="small"
            @click="deleteSubmitClick(scope.row)"
            v-if="permissionDelete"
          >
            删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      layout="total, sizes, prev, pager, next, jumper"
      :page-sizes="[10, 20, 40, 80, 160, 320, 640]"
      :hide-on-single-page="page.totalElements < 10"
      :current-page.sync="form.pageNumber"
      :page-size.sync="form.pageSize"
      :total="page.totalElements"
      @current-change="formSubmitClick"
    />
  </div>
</template>

<script src="./index.vue.js"></script>
